{% extends 'base.html' %}

{% block title %}演示页面 - 自动化测试平台{% endblock %}
{% block description %}自动化测试平台演示页面{% endblock %}

{% block content %}
        <!-- 页面标题和面包屑 -->
        <div class="mb-6">
            <div class="flex items-center text-sm text-text-tertiary mb-1">
                <a href="/" class="hover:text-primary">首页</a>
                <span class="mx-2">/</span>
                <span>演示页面</span>
            </div>
            <h2 class="text-2xl font-bold">测试平台演示</h2>
        </div>
        
        <!-- 内容卡片 -->
        <div class="card max-w-2xl mx-auto">
            <div class="p-6 text-center">
                <div class="w-20 h-20 rounded-full bg-primary/10 flex items-center justify-center mx-auto mb-6">
                    <i class="fas fa-vial text-3xl text-primary"></i>
                </div>
                <h3 class="text-xl font-bold mb-2">自动化测试演示</h3>
                <p class="text-text-secondary mb-6">
                    这是自动化测试平台的模板渲染示例，展示了平台的基本功能
                </p>
                
                <!-- 演示变量显示 -->
                <div class="bg-gray-50 p-6 rounded-lg border border-border mb-6">
                    <p class="text-lg font-medium">
                        渲染的变量值: <span class="text-primary font-bold">{{ name|default:'未设置' }}</span>
                    </p>
                </div>
                
                <!-- 功能说明 -->
                <div class="text-left">
                    <h4 class="font-medium mb-3">自动化测试平台功能</h4>
                    <ul class="list-disc list-inside space-y-2 text-text-secondary">
                        <li>支持多环境配置和切换</li>
                        <li>提供API接口调试功能</li>
                        <li>创建和管理自动化测试用例</li>
                        <li>生成详细的测试报告</li>
                        <li>支持数据驱动测试和Mock服务</li>
                    </ul>
                </div>
                
                <a href="/" class="btn btn-primary mt-6">
                    <i class="fas fa-arrow-left mr-2"></i>返回首页
                </a>
            </div>
        </div>
{% endblock %}

